<template>
    <div class="download">
        <div class="mobileDownload" v-if="data.mobile">
            <div class="jiantou" v-if="data.weixin"></div>

            <n-space align="center" :size="100" vertical v-else>
                <n-space class="mobile" align="center" :size="250" vertical>
                    <span class="title">{{ appName }}APP下载</span>
                    <a :href="downloadUrl()">
                        <img
                            src="@/assets/download/mobileBtn.png"
                            class="downloadBtn"
                        />
                    </a>
                </n-space>

                <img
                    class="copyright"
                    src="@/assets/download/mobileBottom.png"
                />
            </n-space>
        </div>

        <div class="pcDownload" v-else>
            <n-space align="center" justify="center" :size="20" vertical>
                <span class="title">{{ appName }}APP下载</span>
                <img src="@/assets/download/bh.png" />
                <span class="description">请扫描上方二维码下载APP</span>

                <a :href="downloadUrl()">
                    <img
                        src="@/assets/download/pcBtn.png"
                        class="downloadBtn"
                    />
                </a>
            </n-space>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { reactive, onMounted } from "vue"
    import moment from "moment"
    import { browerInfo } from "@/utils"
    import { appName } from "@/utils/config"

    const data = reactive({
        mobile: false,
        weixin: false,
    })

    const downloadUrl = () => {
        const name = "bhfire.apk"

        return `/media/default/${name}?${moment().format("x")}`
    }

    const userAgent = window.navigator.userAgent

    onMounted(() => {
        const info = browerInfo()

        data.mobile = info.mobile

        if (info.browser == "WeiXin") {
            data.weixin = true
        }
    })
</script>

<style lang="less" scoped>
    .download {
        height: 100vh;
        overflow: hidden;

        .title {
            font-size: 24px;
            color: #fff;
        }

        .description {
            font-size: 20px;
            color: #fff;
        }

        .downloadBtn {
            width: 187px;
            height: 50px;

            &:hover {
                display: inline-block;
                border-radius: 20px;
                background-size: contain;
                opacity: 0.5;
            }
        }

        .n-space {
            height: 100%;
        }
    }

    .mobileDownload {
        height: 100%;

        background: url("@/assets/download/mobileTop.png") no-repeat fixed top;
        background-size: 100%;

        .jiantou {
            width: 100%;
            height: 100%;

            background: black url("@/assets/download/jiantou.png") no-repeat;
            background-size: 100% 100%;
            opacity: 0.6;
        }

        .mobile {
            height: 100%;
            padding-top: 40px;
        }

        .copyright {
            width: 100%;
        }
    }

    .pcDownload {
        height: 100%;

        background: #4074ff url("@/assets/download/bottom.png") no-repeat fixed
            bottom;
        background-size: 100%;
    }
</style>
